﻿@model EcoTourEduca.BingYourMaps.ViewModels.EditBingMapsLocationViewModel
@{
	Style.Include("map");
	Script.Require("jQuery");
	Script.Include("http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0");
	Script.Include("maplist.js");
	
	// Set size with units
	var width = (Model.MapWidth != null && Model.MapWidth > 0) ? Model.MapWidth + "pt" : "100%";
	var height = Model.MapHeight + "pt";
}

@using(Script.Foot()) 
{
    <script type="text/javascript">
	    
        var map;
	    var pin;
	    var icon = "@Ajax.JavaScriptStringEncode((String)Model.PinIcon)";

        function addPin(loc)
        {
		    map.entities.remove(pin);
		    pin = newPin(loc, "@Model.PinIconsFolder", icon);
		    map.entities.push(pin);
	    }

        function onMapDClick(e)
        {
		    if (e.targetType === "map") {
			    var p = new Microsoft.Maps.Point(e.getX(), e.getY());
			    var loc = e.target.tryPixelToLocation(p);
			    addPin(loc);

			    $("#BingMapsLocation_LatitudeStr").val(loc.latitude);
			    $("#BingMapsLocation_LongitudeStr").val(loc.longitude);
			    e.handled = true;
		    }
	    }

	    function getDimension(d)
	    {
		    return (d === "") ? "100%" : parseInt(d, 10);
	    }

	    function onRadioIcon()
	    {
		    icon = $("input[name='BingMapsLocation.PinIcon']:checked").val();
		    if(icon !== "")
		    {
			    iconPath = "@Model.PinIconsFolder" + icon;
		    }
		    else 
		    {
			    iconPath = null; @* TODO: Get this to set icon back to default: http://www.bing.com/community/maps/f/12284/p/666870/9646445.aspx *@
		    }
		    pin.setOptions({icon: iconPath});
	    }

        function resetMapSize()
        {
		    var w = getDimension($("#BingMapsLocation_MapWidth").val());
		    var h = getDimension($("#BingMapsLocation_MapHeight").val());
		    $("#BingEditMap").width(w);
		    $("#BingEditMap").height(h);
		    map.setOptions({width: w, height: h});
	    }

	    function onTextHeightChange()
	    {
		    resetMapSize();
	    }

	    function onTextWidthChange()
	    {
		    resetMapSize();
	    }

	    function onTextLatLongChange()
	    {
	        var loc = newLocation($("#BingMapsLocation_LatitudeStr").val(), 
                            $("#BingMapsLocation_LongitudeStr").val());
		    addPin(loc);
	    }

	    function onTextMapTypeChange()
	    {
		    map.setView({mapTypeId: $("#BingMapsLocation_MapType").val()});
	    }

	    function onViewChange()
	    {
		    var z = Math.floor(map.getZoom());
		    $("#BingMapsLocation_MapZoom").val(z);
	    }

	    function onTypeChange()
	    {
		    $("#BingMapsLocation_MapType").val(map.getMapTypeId());
	    }

	    function onZoomTextSet()
	    {
		    var z = parseInt($("#BingMapsLocation_MapZoom").val(), 10);
		    map.setView({zoom: z});
	    }

	    function initMap()
	    {
	        var loc = newLocation(@Model.LatitudeStr, @Model.LongitudeStr);
	        map = newMap("BingEditMap"
                    ,loc
                    ,@Model.MapZoom
                    ,"@(Ajax.JavaScriptStringEncode(Model.MapType))");
	        pin = newPin(loc, "@Model.PinIconsFolder", icon);
		    map.entities.push(pin);

		    Microsoft.Maps.Events.addHandler(map, "viewchangeend", onViewChange);
		    Microsoft.Maps.Events.addHandler(map, "dblclick", onMapDClick);
		    Microsoft.Maps.Events.addHandler(map, "maptypechanged", onTypeChange);
	    }

	    $(window).load(initMap);

	    $(function()
	    {
		    $("fieldset legend").expandoControl(function (controller) { return controller.nextAll(".expando"); }, { collapse: true, remember: false });
		    $("#BingMapsLocation_MapZoom").change(onZoomTextSet);
		    $("#BingMapsLocation_MapWidth").change(onTextWidthChange);
		    $("#BingMapsLocation_MapHeight").change(onTextHeightChange);
		    $("#BingMapsLocation_LatitudeStr").change(onTextLatLongChange);
		    $("#BingMapsLocation_LongitudeStr").change(onTextLatLongChange);
		    $("#BingMapsLocation_MapType").change(onTextMapTypeChange);
		    $("input[name=BingMapsLocation.PinIcon]").click(onRadioIcon);
	    });

    </script>
}

<fieldset>
	<legend>Friendly name</legend>
	<div class="editor-field">
		@Html.TextBoxFor(m => m.FriendlyName)
		@Html.ValidationMessageFor(m => m.FriendlyName)
	</div>
    <div>
        This friendly name will be used in the admin dashboard views of the BingMapsLocation. It will not be showed to visitors.
    </div>
</fieldset>

<fieldset>
	<legend>Include in BingMapsArea(s)</legend>
    <ul style="height: 150px; width:250px; overflow: auto; text-overflow: ellipsis">
        @{
            //var areaIndex = 0;
        }
        @for (int i = 0; i < Model.BingMapAreas.Count(); ++i)
        {
            <li style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis">
                @Html.CheckBoxFor(a => Model.BingMapAreas[i].IsMapped)
                @Html.HiddenFor(a => Model.BingMapAreas[i].PartId)
                @Model.BingMapAreas[i].FriendlyName
            </li>
        }
    </ul>
</fieldset>

<fieldset>
    <legend>Map settings</legend>
    <div class="editor-field">
		@Html.EditorFor(m => m.HideMap)
		<label for="@Html.FieldIdFor(m => m.HideMap)" class="forcheckbox">@T("Hide map from visitors")</label>
		@Html.ValidationMessageFor(m => m.HideMap)
	</div>
    <p style="clear: both;">Double click on the map to set the location.</p>
	<div id="BingEditMap" 
        class="BingMapsLocation" 
        style="position:relative; 
        width:@(width); 
        height:@(height);">
	</div>	
</fieldset>

<fieldset>
	<legend>@T("Map properties")</legend>
	<div class="expando">
		<div class="editor-label">
			@Html.LabelFor(m => m.MapWidth)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.MapWidth)
			@Html.ValidationMessageFor(m => m.MapWidth)
		</div>
		<div class="editor-label">
			@Html.LabelFor(m => m.MapHeight)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.MapHeight)
			@Html.ValidationMessageFor(m => m.MapHeight)
		</div>
		<div class="editor-label">
			@Html.LabelFor(m => m.LatitudeStr)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.LatitudeStr)
			@Html.ValidationMessageFor(m => m.LatitudeStr)
		</div>
		<div class="editor-label">
			@Html.LabelFor(m => m.LongitudeStr)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.LongitudeStr)
			@Html.ValidationMessageFor(m => m.LongitudeStr)
		</div>
		<div class="editor-label">
			@Html.LabelFor(m => m.MapZoom)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.MapZoom)
			@Html.ValidationMessageFor(m => m.MapZoom)
		</div>

		<div class="editor-label">
			@Html.LabelFor(m => m.MapType)
		</div>
		<div class="editor-field">
			@Html.DropDownListFor(m => m.MapType, Model.MapTypeList)
			@Html.ValidationMessageFor(m => m.MapType)
		</div>
	</div>
</fieldset>

<fieldset>
	<legend>Map icon</legend>
	<label class="icon">
        @Html.RadioButton("MapIcon", "", String.IsNullOrEmpty(Model.PinIcon)) Default
	</label>
	@foreach (var mapIcon in Model.PossiblePinIcons)
	{
		<label class="icon">
            @Html.RadioButton("MapIcon", mapIcon, mapIcon == Model.PinIcon) 
            <img src="@Model.PinIconsFolder@mapIcon" alt="Icon: @mapIcon" />
		</label>
	}
	<p style="clear: both;">
        To add more icon options upload icon images to the mapicons folder in <a href="/Admin/Media">media</a>.<br />
	    Map icons can be no bigger than 25 x 39 pixels or they will get cropped.
	</p>
</fieldset>